<template>
  <div class="user">
    <div class="btna">
      <el-button type="primary" @click="toAddUserHandler">新增</el-button>
      <el-button type="danger">批量删除</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="realname" label="姓名"> </el-table-column>
        <el-table-column prop="telephone" label="联系电话"> </el-table-column>
        <el-table-column prop="gender" label="性别"> </el-table-column>
        <el-table-column label="出生日期" width="160" align="center">
          <template v-slot="scope">
            {{ scope.row.birth }}
          </template>
        </el-table-column>
        <el-table-column prop="registerTime" label="注册时间">
        </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="userFace" label="头像"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="delHandler(scope.row.id)"
              >删除</el-button
            >
            <el-button type="text" @click="editHandler(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="visible">
      {{ formData }}
      <el-form :model="formData">
        <el-form-item label="用户名" label-width="60px">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="60px">
          <el-input v-model="formData.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名" label-width="60px">
          <el-input v-model="formData.realname"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="60px">
          <el-radio-group v-model="formData.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="toSaveHandler">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import requset from "../../utils/request";
import { post_string } from "../../utils/request";
import _ from "lodash";
export default {
  data() {
    return {
      tableData: [],
      title: "",
      visible: false,
      formData: {},
    };
  },
  methods: {
    // 请求用户数据列表
    async findAllUsers() {
      let res = await requset.get("/baseUser/findAll");
      this.tableData = res.data;
    },
    // 删除按钮点击事件
    delHandler(id) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        requset.get("/baseUser/deleteById", { params: { id } }).then((res) => {
          this.findAllUsers(); // 刷新数据
          this.$message({
            type: "success",
            message: res.message,
          }); // 提示成功信息
        });
      });
    },
    // 修改按钮点击事件
    editHandler(row) {
      this.formData = _.clone(row);
      this.visible = true;
    },
    // 新增按钮点击事件
    toAddUserHandler() {
      this.formData = {}; // 置空表单
      this.title = "新增用户"; // 修改模态框的标题
      this.visible = true; // 打开模态框
    },
    toSaveHandler() {
      post_string("/baseUser/saveOrUpdate", this.formData).then((res) => {
        this.findAllUsers(); // 重载数据
        this.$message.success(res.message); // 提示成功信息
        this.visible = false; // 关闭模态框
      });
    },
  },
  created() {
    this.findAllUsers();
  },
};
</script>
<style lang="less" scoped>
</style>